<template>
  <div
    id="ment-left-container"
    :class="{ 'ment-container-left': true, isPackUpLeft: !unfoldStatus }"
    @mouseenter.stop="mouseenter"
    @mouseleave.stop="mouseleave"
    v-non-penetrate
  >
    <div
      v-for="(listItem, keyIndex) in [list, list2]"
      :key="keyIndex"
      v-show="keyIndex == 1 ? resourcePanel : true"
      :class="`listItem listItem${keyIndex}  ${!blackboard && 'non-blackboard-mode'}`"
    >
      <!-- {{ sldeCtxs }} -- {{ cacheCtxsKey }} -->
      <div v-for="(item, index) in listItem" :key="index">
        <div
          :class="{
            ['icon-item']: true,
            isBg: item.key !== 'resource',
            ['icon-select']: item.key === sldeCtxs,
          }"
          :id="item.icon"
          @click="handClick(item)"
          v-if="item.key === 'back' ? sldeCtxs && ['textbook', 'church'].includes(sldeCtxs) : true"
        >
          <icon-font :type="'icon-' + (item.key === sldeCtxs ? item.selectIcon : item.icon)" class="iconfont" />
          <!-- 退出授课, 从[教参]进入资源时,名称应该叫返回 -->
          <!-- <span v-if="item.key === 'quit' && resourcePanel && sldeCtxs === 'church'">返回</span> -->
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
    <span class="unfold" @click="toggleClick">
      <icon-font :type="'icon-' + (unfoldStatus ? 'right' : 'left')" class="iconfont" />
    </span>
  </div>
</template>
<script lang="ts" setup>
import { isUndefined } from 'lodash';
import { storeToRefs } from 'pinia';
import { nextTick, onMounted, reactive, ref, watch, watchEffect } from 'vue';
import useStore from '../store';
import { removeStorage } from '../utils/storage';

const store = useStore();
const { menu, ws } = store;
// console.log('menu ====> ', menu);
const { resourcePanel, inType } = storeToRefs(menu);

const Props = defineProps({
  ext: {
    type: String,
  },
  blackboard: {
    type: Boolean,
  },
  canvasMode: {
    type: Boolean,
  },
  // 触摸事件
  mouseHandle: {
    type: Function,
    default: () => {},
  },
});

// 功能按钮
const list = ref([
  // { title: '返回', icon: 'fanhui', key: 'back', mode: 'ctn' },
  { title: '黑板', icon: 'heiban', selectIcon: 'hieban_sel', key: 'blackboard', mode: 'ctx' },
  { title: '教材', icon: 'jiaocai', selectIcon: 'jiaocai_sel', key: 'textbook', mode: 'ctx' },
  { title: '教参', icon: 'jiaocan', selectIcon: 'jiaocan_sel', key: 'church', mode: 'ctx' },
  { title: '退出授课', icon: 'tuichushouke', key: 'quit', mode: 'ctn' },
  // { title: '菜单', icon: 'caidan', selectIcon: 'caidan_sel', key: 'menu', mode: 'ctx' },
]);
// 授课下面的按钮
const list2 = ref([{ title: '授课资源', icon: 'shoukeziyuan', key: 'resource', mode: 'ctn' }]);

// 当前选中的内容性菜单
const sldeCtxs = ref('');
// 功能点触发点击
const unfoldStatus = ref(true);
// 功能list发生点击事件
const emits = defineEmits(['open', 'setCtxs', 'goDesktop', 'toggle', 'changeCtn']);
const handClick = ({ mode, key }) => {
  // inType == bar 默认黑板  source: 不设置默认值,黑板也可以关闭
  // 1. 如果菜单已经被高亮，点击不在处理事件 (bar)
  const isHighlight = sldeCtxs.value === key;
  // 2. 如果已经打开了[教材，教参]，又打开了黑板，那么再次点击黑板可以关闭
  //    如果是inType = resource 也可以关闭黑板
  const twp =
    inType.value === 'resource' || (key === 'blackboard' && ['textbook', 'church'].includes(cacheCtxsKey.value));
  const allowClose = sldeCtxs.value === 'blackboard' && twp;
  // 逻辑判断
  if (isHighlight && !allowClose) {
    // console.log('不执行 sldeCtxs.value ==============> ', sldeCtxs.value, 'twp');
    return;
  }

  // console.log('点击工具 ===========>  ', key);
  // 如果点击的是内容性按钮，做选中处理
  if (mode == 'ctx') {
    switch (key) {
      case 'menu':
        emits('open', 'menu');
        break;
      case 'blackboard':
        emits('setCtxs', key);
        break;
      // 点击教材，教参 逻辑交互
      case 'textbook':
      case 'church':
        // 点击教参 切换到正常流程
        // 场景: 点击资源进入授课工具,此时点击退出授课 应该是直接关闭授课工具. 但是如果又点击了教参和其他操作后,再次点击退出时,应该是别的操作
        if (key == 'church') {
          // menu.setInType('bar');
        }
        // 点击教材,教参之前，判断是否是在教材教参之中打开了黑板或者画布，如果打开了 需要先关闭黑板/画布
        // 如果是已经打开了教材教参后打开的黑板，再次选择时，只需要关闭黑板即可
        if (Props.blackboard) {
          emits('setCtxs', 'blackboard');
        }
        // 切换时 如果画布打开状态,执行一下鼠标 关闭画布
        if (Props.canvasMode) {
          emits('changeCtn', 'mouse');
        }
        // 如果之前打开过,直接高亮即可（黑板亮起的前提下，因为只有在教材教参下，打开黑板的时候，不需要跳转只需要关闭）
        if (Props.blackboard && ['textbook', 'church'].includes(cacheCtxsKey.value)) {
          // 如果离开黑板时,新点击得key值和进入黑板之前的key值相同,标识返回, 只需要关闭黑板即可
          // 但是如果点击了教材,再点击了教参,点击黑板进入后,再次点击教材,此实缓存得教参与选中的教材不匹配,需要重新设置一下选中
          if (cacheCtxsKey.value !== key) {
            window.electronAPI?.sendKey(key);
          }
          // 设置教材教材高亮即可
          sldeCtxs.value = key;
        } else {
          // 从黑板或者其他地方进入教材教参, 执行跳转
          window.electronAPI?.sendKey(key);
        }
        break;
      default:
        break;
    }
    selectCtxFromClick(key);
  } else {
    // 功能性按钮,触发事件
    selectCtnFromClick(key);
  }
};

// 缓存上一次的key (再清空的时候 更新)
const cacheCtxsKey = ref('');
// ctx 内容性
// 点击需要选中
const selectCtxFromClick = (key) => {
  if (key == sldeCtxs.value) return;
  // 选中后处理 通知外层客户端执行操作
  nextTick(() => {
    cacheCtxsKey.value = sldeCtxs.value;
    sldeCtxs.value = key;
    window.electronAPI?.sendKey(key);
  });
};

// ctn功能性
const selectCtnFromClick = (key) => {
  switch (key) {
    case 'back':
      // 从教材，教参page页面返回，返回到系统中去
      window.electronAPI?.sendKey(key);
      sldeCtxs.value = '';
      break;
    // 点击授课资源
    case 'resource':
      emits('open', 'resource');
      break;
    // 退出授课
    case 'quit':
      if (ws.wsref) {
        ws.close();
      }
      removeStorage();
      // 销毁教辅工具
      window.electronAPI?.quit();
      break;
    default:
      break;
  }
};

// 处理展开 收起动画
const toggleClick = () => {
  unfoldStatus.value = !unfoldStatus.value;
  emits('toggle', unfoldStatus.value);
};

// 关闭菜单(显示到上一条上)
const closeTeachingMode = () => {
  sldeCtxs.value = cacheCtxsKey.value;
};
// 根据key执行
const setSlideCtxs = (key) => {
  // 找到对应的功能 并点击它
  const ctd: any = list.value.find((v) => v.key == key);
  if (ctd) {
    handClick(ctd);
  }
};

defineExpose({
  closeTeachingMode,
  setSlideCtxs,
});

// 移入时 关闭事件穿透
const mouseenter = () => {
  Props.mouseHandle(false);
};

// 移出时开启事件穿透
const mouseleave = () => {
  // 如果当前是菜单被选中，移出的时候 不开启事件穿透
  if (sldeCtxs.value == 'menu') {
    return;
  }
  Props.mouseHandle(true);
};

watch(
  () => Props.blackboard,
  (newVal) => {
    // 如果黑板被关闭，选中之前的(不是黑板),但是现在选择的是黑板(再次点击)
    if (!newVal && cacheCtxsKey.value !== 'blackboard' && sldeCtxs.value === 'blackboard') {
      sldeCtxs.value = cacheCtxsKey.value;
      // console.log('又进来了 ????');
      // cacheCtxsKey.value = 'blackboard';
    }
  },
);

watchEffect(() => {
  // 如果是从侧边栏打开的授课模式,默认进入黑板
  if (inType.value === 'bar') {
    // 打开授课模式，初始状态下选中黑板
    const vdx: any = list.value.find((v) => v.key === 'blackboard');
    setTimeout(() => {
      // 默认关闭事件穿透
      Props.mouseHandle(false);
      handClick(vdx);
    }, 300);
  } else if (inType.value === 'resource') {
    // 如果是资源, 进入时打开
    menu.setSlideRPanel(true);
  }
});
</script>
<style lang="scss" scoped>
.ment-container-left {
  position: fixed;
  left: 0;
  top: 50%;
  height: 370px; // 定义一个高度 让授课资源出现的时候 不会挤压原来的高度
  // border: 1px solid red;
  z-index: 1000;
  transform: translateY(-50%);
  display: flex;
  transition: 0.225s;
  flex-direction: column;

  .tool-container {
    // background: red;
  }

  .unfold {
    position: absolute;
    height: 60px;
    width: 20px;
    background: #ffffff;
    right: -10px;
    border-radius: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid #eeeeee;

    .iconfont {
      color: rgb(161, 161, 161);
    }
  }

  .horizontalLine {
    height: 1px;
    width: 56px;
    background: #dfdfdf;
    margin: 10px 0;
    padding: 0 8px;
  }

  // 每个按钮得区域

  .isBg {
    // background: #f9f9f9;
    // border: 1px solid #eeeeee;

    &:hover {
      background-color: white;
    }
  }

  .icon-item {
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    user-select: none;

    .iconfont {
      font-size: 28px;
    }

    span {
      margin-top: 8px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #6a6a6a;
      line-height: 18px;
      text-align: left;
      font-style: normal;
    }
  }

  .icon-select {
    background: #ff8500;

    &:hover {
      background-color: #ff8500;
    }

    span {
      color: #fff;
    }
  }
}

.listItem {
  padding: 16px 8px 8px 8px;
  box-shadow: 1px solid rgb(241, 241, 241);
  border: 1px solid rgb(241, 241, 241);
  background: rgba(241, 241, 241, 0.89);
  border-radius: 0px 8px 8px 0px;
  backdrop-filter: blur(20px);
}

.listItem0 {
}

.listItem1 {
  margin-top: 30px;
}

// 非黑板窗口下
.non-blackboard-mode {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}

// 收起
.isPackUpLeft {
  transform: translateX(-100%) translateY(-50%);
  transition: 0.225s;

  .unfold {
    right: -20px;
  }
}
</style>
